import React, { Component } from 'react'
import axios from 'axios'

export default class Search extends Component {

	search = () => {
		// 获取用户输入
		const {keyWordElement: {value: keyWord}} = this
		// 发送请求前通知app更新状态
		this.props.updateAppState({isFirst:false, isLoading:true})
		// 发送网络请求
		axios.get(`/api1/search/users?q=${keyWord}`).then(
			response => {
				// 发送请求成功后通知app更新状态
				this.props.updateAppState({isLoading:false, users:response.data.items, err: ''})
			},
			error => {
				// 请求失败后通知app
				this.props.updateAppState({isLoading:false, err:error.message})
			}
		)

	}

	render() {
		return (
			<section className="jumbotron">
				<h3 className="jumbotron-heading">搜索github用户</h3>
				<div>
					{/* 非受控组件 */}
					<input ref={c => {this.keyWordElement = c}} type="text" placeholder="输入关键词点击搜索"/>&nbsp;
					<button onClick={this.search}>搜索</button>
				</div>
			</section>
		)
	}
}
